<form id="<?php echo $uniqid;?>" method="post" style="padding: 0;">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable" style="margin-bottom: 100px;">
        <tr bgcolor="#FFFFFF">
            <td colspan="2" class="tlabel" style="text-align: left"><b>基础设置</b></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >代理内购：</td>
            <td>
                <el-radio-group v-model="params.self_buy">
                    <el-radio label="0">关闭</el-radio>
                    <el-radio label="1">开启</el-radio>
                </el-radio-group>
                <div class="title-tip">
                    内购优惠开启后，分销商自己购买时，下单可以给自己返佣
                </div>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel"  width="10%">代理商审核：</td>
            <td>
                <el-radio-group v-model="params.agent_check">
                    <el-radio label="0">不需要</el-radio>
                    <el-radio label="1">需要</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel"  width="10%">越级升级：</td>
            <td>
                <el-radio-group v-model="params.upgrade_jump">
                    <el-radio label="0">不允许</el-radio>
                    <el-radio label="1">允许</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel"  width="10%">升级审核：</td>
            <td>
                <el-radio-group v-model="params.upgrade_check">
                    <el-radio label="0">不需要</el-radio>
                    <el-radio label="1">需要</el-radio>
                </el-radio-group>
            </td>
        </tr>

        <tr bgcolor="#FFFFFF">
            <td colspan="2" class="tlabel" style="text-align: left"><b>代理商设置</b></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >成为代理商条件：</td>
            <td>
                <el-radio-group v-model="params.become_agent.type">
                    <el-radio label="goods">购买任意商品</el-radio>
                    <el-radio label="consume">消费累计</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >{{params.become_agent.type=='goods' ? '已选商品' : '累计消费'}}</td>
            <td>
                    <div label="选择商品：" v-if="params.become_agent.type=='goods'">
                        <div class="display-flex">
                            <div class="goods-add" style="margin: 5px 0;" @click="addGoods">{{params.become_agent.value?'重新选择':'选择商品'}}</div>
                            <!-- <div style="margin-left: 20px;">{{params.become_agent.value}}</div> -->
                        </div>
                        <div style="height: 500px; overflow-y: auto; border: 1px solid #e6e6e6;margin-top: 9px;" v-if="params.become_agent.value">
                            <div class="shopro-goods-header">
                                <div class="shopro-goods-id">ID</div>
                                <div class="shopro-goods-title">商品信息</div>
                                <div class="shopro-goods-stock">库存</div>
                                <div class="shopro-goods-opt">操作</div>
                            </div>
                            <div>
                                <div class="shopro-goods-body" v-for="(goods,gindex) in goodsDetail">
                                    <div class="shopro-goods-id">
                                        {{goods.id}}
                                    </div>
                                    <div class="shopro-goods-title">
                                        <div class="shopro-goods-image">
                                            <el-image v-if="goods.image" :src="goods.image" fit="contain">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div>
                                            <div class="ellipsis-item" style="width: 400px;height: 20px;line-height: 20px;overflow: hidden;">{{goods.title}}</div>
                                            <div style="height: 20px;line-height: 20px;">￥{{goods.price}}</div>
                                        </div>
                                    </div>
                                    <div class="shopro-goods-stock">
                                        {{goods.stock}}
                                    </div>
                                    <div class="shopro-goods-opt">
                                        <span class="become_register_delete" @click="deleteGoods(goods.id, gindex)">删除</span>
                                    </div>
                                </div>
                                <div style="padding: 0 20px;" v-if="!goodsDetail">
                                    商品不存在或已下架
                                </div>
                            </div>
                            <!-- <div class="shopro-goods-body" v-if="!params.become_agent.value">
                                <div class="shopro-goods-add-button" @click="addGoods">
                                    <i class="el-icon-plus"></i>选择商品
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <div label="消费累计金额：" v-if="params.become_agent.type=='consume'">
                        <div class="display-flex" style="width: 320px;height: 40px;">
                            <el-input v-model="params.become_agent.value" size="small" type="number" v-enter-number>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </div>
                    <div label="邀请下级用户满：" v-if="params.become_agent.type=='child_user_count_1'">
                        <div class="display-flex" style="width: 320px;height: 40px;">
                            <el-input v-model="params.become_agent.value" size="small" type="number">
                                <template slot="append">人</template>
                            </el-input>
                        </div>
                    </div>
            </td>
        </tr>

        <tr bgcolor="#FFFFFF">
            <td colspan="2" class="tlabel" style="text-align: left"><b>结算条件</b></td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >商品结算方式：</td>
            <td>
                <el-radio-group v-model="params.commission_price_type">
                    <el-radio label="goods_price">商品价</el-radio>
                    <el-radio label="pay_price">实际支付价</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >佣金结算方式：</td>
            <td>
                <el-radio-group v-model="params.commission_event">
                    <el-radio label="payed">支付后结算</el-radio>
                    <el-radio label="confirm">确认收货结算</el-radio>
                    <el-radio label="finish">订单完成结算</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >退款扣除佣金：</td>
            <td>
                <el-radio-group v-model="params.refund_commission_reward">
                    <el-radio label="0">不扣除</el-radio>
                    <el-radio label="1">扣除</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >退款扣除分销业绩：</td>
            <td>
                <el-radio-group v-model="params.refund_commission_order">
                    <el-radio label="0">不扣除</el-radio>
                    <el-radio label="1">扣除</el-radio>
                </el-radio-group>
            </td>
        </tr>
    </table>
    <div style="position:absolute;z-index: 9999; bottom:0;width:100%; text-align:right; background-color:#F1f1f1; border:#ccc 1px solid;">
        <div style="padding:2px 15px 2px 10px; float:right;">
            <a href="javascript:void(0);" class="l-btn l-btn-small" @click="submit"><span
                    class="l-btn-left l-btn-icon-left"><span class="l-btn-text">保存</span><span
                    class="l-btn-icon icon-ok">&nbsp;</span></span></a>
            <a href="javascript:void(0);" class="l-btn l-btn-small" @click="close"><span
                    class="l-btn-left l-btn-icon-left"><span class="l-btn-text">关闭</span><span
                    class="l-btn-icon icon-no">&nbsp;</span></span></a>
        </div>
    </div>
</form>
<div id="agentconfigdlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>

<script>
    var agentconfigVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            goodsDetail: [],
        },
        created(){
            this.params.become_agent = this.params.become_agent ? JSON.parse(this.params.become_agent) : {};
            if(this.params.become_agent.type==='goods'){
                this.params.become_agent.value = this.params.become_agent.value.split(',');
                this.init();
            }
        },
        methods: {
            init(){
                $.post('/admin/agent/qualifyGoods', {goods_ids: this.params.become_agent.value}, (data)=> {
                    if (data.ret === 0) {
                        this.goodsDetail = data.data;
                    }
                }, 'json');
            },
            addGoods(){
                $("#agentconfigdlg").dialog({
                    title: '选择代理商品',
                    closed: false,
                    width: 840,
                    height: 520,
                    cache: false,
                    href: '/admin/agent/goodsadd',
                    modal: true,
                    buttons: [{
                        text: '保存',
                        id: 'agentconfigsubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '关闭',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#agentconfigdlg").dialog('close');
                        }
                    }]
                });
            },
            deleteGoods(goods_id, gindex){
                this.params.become_agent.value.splice(this.params.become_agent.value.indexOf(goods_id.toString()), 1);
                this.goodsDetail.splice(gindex, 1);
            },
            submit: function () {
                $.post('/admin/agent/config', agentconfigVm.params, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $('#rightTabs').tabs('close', '代理设置');
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            },
            close(){
                $('#rightTabs').tabs('close', '代理设置');
            }
        }
    });
    $(function () {
        $('#agentsubmit').click(function (data) {
            agentconfigVm.submit();
        });
    });
</script>

<style>
    .become_register_delete {
        color: #FF5959;
        cursor: pointer;
    }
    .shopro-goods-id {
        width: 5%;
        padding: 0 10px;
        text-align: center;
        flex-shrink: 0;
    }
    .shopro-goods-header {
        height: 40px;
        display: flex;
        align-items: center;
        background: #f9f9f9;
    }

    .shopro-goods-body {
        height: 50px;
        display: flex;
        align-items: center;
        border-top: 1px solid #e6e6e6;
    }

    .shopro-goods-title {
        width: 65%;
        min-width: 280px;
        display: flex;
        height: 50px;
        align-items: center;
        overflow: hidden;
        padding: 0 20px;
    }

    .shopro-goods-stock {
        width: 15%;
        min-width: 100px;
    }

    .shopro-goods-opt {
        width: 20%;
        min-width: 100px;
    }

    .shopro-goods-image {
        width: 36px;
        height: 36px;

        border: 1px solid #E6E6E6;
        box-sizing: border-box;
        border-radius: 2px;
        margin-right: 12px
    }

    .shopro-goods-add-button {
        cursor: pointer;
        color: #7438D5;
        font-size: 13px;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
    }

    .shopro-goods-add-button i {
        margin-right: 6px;
    }
    .goods-add {
        width: 80px;
        height: 30px;
        border-radius: 4px;
        font-size: 13px;
        cursor: pointer;
        background: #7438D5;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>